<template>
	<view>

		<view class="state">{{dataDetail.arrivalStatusStr}}</view>
		<text class="state-info" v-if="dataDetail.arrivalStatus===1">销售顾问会主动联系您，您也可以致电查询</text>


		<view class="item" style="margin: 30upx 40upx 20upx;border-radius: 18upx;padding: 0 26upx 39upx;">

			<view class="text-line2">
				<text class="text-name2">预约品牌/车系</text>
				<text
					class="text-value2">{{filterNull(dataDetail.brandName) + " " + filterNull(dataDetail.seriesName)}}</text>
			</view>

			<u-line color="#EDEDED"></u-line>

			<view class="text-line2">
				<text class="text-name2">预约车型</text>
				<text class="text-value2">{{filterNull(dataDetail.modelName)}}</text>
			</view>

			<u-line color="#EDEDED"></u-line>

			<view class="text-line2">
				<text class="text-name2">预约人</text>
				<text class="text-value2">{{filterNull(dataDetail.contact)}}</text>
			</view>

			<u-line color="#EDEDED"></u-line>

			<view class="text-line2">
				<text class="text-name2">联系电话</text>
				<text class="text-value2">{{filterNull(dataDetail.phone)}}</text>
			</view>

			<u-line color="#EDEDED"></u-line>

			<view class="text-line2">
				<text class="text-name2">意向备注</text>

			</view>

			<text class="text-value2" style="margin:-10upx 0 30upx;">{{filterNull(dataDetail.reserveContent)}}</text>

			<u-line color="#EDEDED"></u-line>

			<view class="text-line2" v-if="false">
				<text class="text-name2">预约编号</text>
				<text class="text-value2">{{filterNull(dataDetail.cluesId)}}</text>
			</view>

			<view class="text-line2" style="margin: 20upx 0 30upx;">
				<text class="text-name2">提交时间</text>
				<text class="text-value2">{{filterNull(dataDetail.reserveTime)}}</text>
			</view>

			<u-line color="#EDEDED"></u-line>

			<view class="text-line2">
				<text class="text-name2">预约经销商</text>
				<text class="text-value2">{{filterNull(dataDetail.reserveDeptName)}}</text>
			</view>

			<view style="font-size: 22upx;color: #999999;line-height: 35upx;margin-top: -10upx;">
				{{filterNull(dataDetail.reserveAddress)}}
			</view>

			<view class="distance-wrap">
				<text style="font-size: 22upx;color: #999999;">距离</text>
				<text class="distance">{{filterNull(dataDetail.reserveDeptDistanceDesc)}}</text>

				<image src="../../../static/coupon/callPhone.png" mode="scaleToFill" style="margin-right: 40upx;"
					@click="makephone">
				</image>
				<image src="../../../static/coupon/map-navigation.png" mode="scaleToFill" @click="navi"></image>
			</view>


			<!-- 1.预约成功 2.已到店 3.无效 -->
			<view v-if="dataDetail.arrivalStatus===2">
				<u-line color="#EDEDED"></u-line>
				
				<view class="text-line2">
					<text class="text-name2">到店时间</text>
					<text class="text-value2">{{filterNull(dataDetail.arrivalTime)}}</text>
				</view>
				
				<view class="text-line2" style="margin: 0;">
					<text class="text-name2">服务顾问</text>
					<text class="text-value2">{{filterNull(dataDetail.arrivalDealName)}}</text>
				</view>
			</view>
			
			<view v-else-if="dataDetail.arrivalStatus===3">
				<u-line color="#EDEDED"></u-line>
				
				<view class="text-line2">
					<text class="text-name2">是否到店</text>
					<text class="text-value2">否</text>
				</view>
				
				<view class="text-line2">
					<text class="text-name2">处理人</text>
					<text class="text-value2">{{filterNull(dataDetail.arrivalDealName)}}</text>
				</view>
				
				<view class="text-line2" style="margin: 0;">
					<text class="text-name2">处理时间</text>
					<text class="text-value2">{{filterNull(dataDetail.arrivalDealTime)}}</text>
				</view>
				
				<text
					style="font-size: 22upx;color: #666666;margin-top: 30upx;line-height: 36upx;">说明:  {{filterNull(dataDetail.arrivalDesc)}}</text>
				
			</view>
			
		
		</view>
	</view>
</template>

<script>
	import {
		cluessourcedriverinfo
	} from "../../../common/api.js"

	export default {
		data() {
			return {
				cluesId: '',
				dataDetail: {},
				myLat: '',
				myLng: '',
			}
		},
		methods: { 
			getData() {
				cluessourcedriverinfo({
					params: {
						cluesId: this.cluesId,
						latitude: this.myLat,
						longitude: this.myLng,
					}
				}).then(res => {
					this.dataDetail = res;
				})
			},

			getLocation() {
				console.log('initmap进入了');

				wx.getLocation({
					type: 'wgs84',
					success: (res) => {
						this.myLat = res.latitude;
						this.myLng = res.longitude;

						console.log('mylat', res);
						this.getData()
					},
					fail: (e) => {
						console.log('获取定位失败', e);
						this.getData()
					}
				})
			},

			navi() {
				console.log('进来了');
				let that = this;
				// uni.getLocation({
				// 	type: 'wgs84',
				// 	success: function(res) {
				wx.openLocation({ //​使用微信内置地图查看位置。
					latitude: that.dataDetail.reserveDeptLatitude*1, //要去的纬度-地址
					longitude: that.dataDetail.reserveDeptLongitude*1, //要去的经度-地址
					name: that.dataDetail.reserveDeptName,
					address: that.dataDetail.reserveAddress
				})
				// 	}
				// })
			},

			makephone() {
				uni.makePhoneCall({
					phoneNumber: this.dataDetail.reserveDeptPhone
				})
			},



		},
		onLoad(op) {
			this.cluesId = op.cluesId;
			// this.getData();
			this.getLocation();
		}
	}
</script>

<style lang="scss" scoped>
	.state {
		font-size: 32upx;
		color: $green12;
		font-weight: bold;
		margin: 30upx 0 0 75upx;
	}

	.state-info {
		font-size: 24upx;
		color: $black99;
		margin: 12upx 10upx 0 75upx;
	}

	.distance-wrap {
		@include flex;
		align-items: center;
		margin: 20upx 0;

		.distance {
			font-size: 26upx;
			color: #333333;
			font-weight: bold;
			flex-grow: 1;
			margin-left: 11upx;
		}

		image {
			width: 35upx;
			height: 35upx;
		}
	}
</style>
